<!doctype html>
<html>
    <!--head begin-->
    <div class="nav">
        <ul class="navlist">
        <li><a href="../网站/个人网页.html">首页</a></li>
        <li> <a href="../网上花店/网上花店.html">网上花店</a></li>
        <li> <a href="../千年/千年.html">千年</a></li>
        <li> <a href="../爱家居/爱家居.html">爱家居</a></li>
        <li> <a href="../博客/博客.html">博客</a></li>
        <li> <a href="../视频/视频.html">视频</a></li>
        </ul>
    </div>
    <div class="header">
        <h1><strong>彼岸之花</strong><em>偏安一隅 静静生活</em></h1>
        <hr size="2" color="#d1d1d1" width="980px"/>
    </div>
    <style>
        body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, img ,video
        {margin:0;padding:0;border:0;list-style: none; outline:none;}
        a{
                text-decoration: none;
            }
.nav{
	height: 40px;
	/* 这里做一个渐变的导航条 */
	background: linear-gradient(orange,#e60);
}
.navlist li{
	/* 通过左浮动，让列表变成横排 */
	float: left;
	height: 40px;
	width: 100px;
	/* 让文本水平垂直居中 */
	line-height: 40px;
	text-align: center;
}
.navlist a{
	/* 超链接改黑色 */
	color: #000;
	/* 我们把链接变成块显示 */
	display: block;
}
.navlist{
	/* 列表宽度设为800，然后居中 */
	width: 800px;
	margin:auto;
}
/* 我们设置鼠标悬停链接时，背景色变化 */
.navlist a:hover{
	background-color: #fa0;
}
    .header{
        width:980px;
        margin:0 auto 7px;
        line-height:86px;
        text-align:center;
        font-family:"微软雅黑";
        color:#a5a5a5;
        
    }
    .header h1{ font-weight:normal }
    .header strong{
        font-weight:normal;
        font-size:30px;
        text-shadow: 8px 8px 16px red;
    }
    .header em{
        font-style:normal;
        font-size:14px;
    }
    .fenlei{
        width:980px;
        margin:0 auto;
    }
    .fenlei h2{
        font-size:l4px;
        font-family:"微软雅黑";
        color:#a5a5a5;
        height:42px;
        line-height: 42px;
    }
    .fenlei p{
        line-height:30px;
        text-align:center;
        font-size:18px;
        
    }
    .images {
            width: 700px;
            display: flex;
            
            margin: 0 auto;
    }
    .shouhou{
        width: 602px;
        margin: 0 auto;
        text-align: center;
        font-family:"微软雅黑";
        font-size:16px ;
        font-weight: bold;
        color:#a5a5a5;
    }
    .boss{
        width: 602px;
        margin: 0 auto;
    }
    .boss p{
        text-indent: 2em;
        font-style: italic;
        line-height: 26px;
        font-size: 14px;
        color:#a5a5a5;
    }
    .boss h3{
        text-indent: 2em;
        height: 30px;
        line-height: 30px;
        font-family:"微软雅黑";
        font-size: 18px;
        font-weight: normal;
        color:#a5a5a5;
    }
    </style>
    <!--fenlei begin-->
    <div class="fenlei">
        <h2>商品分类></h2>
        <img src="./网上花店image/banner.jpg" alt="网上花店"/>
        <br /><br />
        <p>我喜欢一些花儿，静静地开放，从不声张。小小的花朵，有着异样的芬芳···</p>
        <br />
    </div>
    <!--fenlei end-->
    <!--bestseller begin-->
    <div class="images">
        <img class="images" src="./网上花店image/1.jpg"><p>&nbsp;&nbsp;</p>
        <img class="images" src="./网上花店image/2.jpg"><p>&nbsp;&nbsp;</p>
        <img class="images" src="./网上花店image/3.jpg"><p>&nbsp;&nbsp;</p>
        <img class="images" src="./网上花店image/4.jpg"><p>&nbsp;&nbsp;</p>
    </div>
    <br />
    <div class="images">
        <img class="images" src="./网上花店image/5.jpg"><p>&nbsp;&nbsp;</p>
        <img class="images" src="./网上花店image/6.jpg"><p>&nbsp;&nbsp;</p>
        <img class="images" src="./网上花店image/7.jpg"><p>&nbsp;&nbsp;</p>
        <img class="images" src="./网上花店image/8.jpg"><p>&nbsp;&nbsp;</p>
    </div>
    <br />
    <div class="images">
        <img class="images" src="./网上花店image/8.jpg"><p>&nbsp;&nbsp;</p>
        <img class="images" src="./网上花店image/9.jpg"><p>&nbsp;&nbsp;</p>
        <img class="images" src="./网上花店image/1.jpg"><p>&nbsp;&nbsp;</p>
        <img class="images" src="./网上花店image/2.jpg"><p>&nbsp;&nbsp;</p>
    </div>
    <!--bestseller end-->
    <!--footer begin-->
    <div class="shouhou">
    <p>品质保障&nbsp;&nbsp;|&nbsp;&nbsp;七天无理由退换货&nbsp;&nbsp;|&nbsp;&nbsp;特色服务体验&nbsp;&nbsp;|&nbsp;&nbsp;帮助中心</p>
    </div>
    <div class="boss">
        <img src="./网上花店image/tuxiang.gif" alt="网上花店" align="left"/>
        <h3>店主：Michael_唐僧</h3>
        <p>飞舞的花儿像一首诗，写着秋天的心事。带着相思，轻轻，轻轻，飘向大地!</p>
        <p>也许这只是秋季里的一场游戏。</p>
        <br /><br /><br />
    </div>
    <!--footer end-->
</html> 